import { Component, OnInit } from '@angular/core';

import {RequestService} from '../../services/request.service'


/*
  获取异步数据的几种方法
    - 回调函数
    - Promise
    - RxJs  ---- angular里集成内置的方法
*/

@Component({
  selector: 'app-sync',
  templateUrl: './sync.component.html',
  styleUrls: ['./sync.component.css']
})
export class SyncComponent implements OnInit {

  constructor(public request:RequestService) { }

  ngOnInit() {
    //同步方法
    let data = this.request.getData()
    console.log(data);
    
    // let callbackData = this.request.getCallBackData()    //同步方法获取不到异步数据
    // console.log(callbackData);
    // 回调函数获取异步数据
    this.request.getCallBackData((data: any) => {
      console.log(data);
      
    })

    // Promise获取异步数据
    this.request.getPromiseData().then(data => {
      console.log(data);
    })

    // rxjs 获取异步数据的方式
    this.request.getRxjsData().subscribe(data => {    // subscribe订阅方式
      console.log(data);
      
    })

    
    var b = this.request.backRxjsData().subscribe(data => {    // subscribe订阅方式
      console.log(data);
    })
    // rxjs的取消订阅       promise做不到
    setTimeout(() => {
      b.unsubscribe();         //取消订阅， this.request.backRxjsData()这个方法就不执行了
    })

    // rxjs执行多次        promise做不到，只会执行一次
    // this.request.getRxjsIntervalData().subscribe(data => {
    //   console.log(data);
      
    // })

  }

}
